import {FC} from "react";
import {Image} from "antd";
import fireIcon from "@/assets/gif/fire.gif"
import {randomColor} from "ts-mango";
import {navigation} from "@/common/components/Navigation";

interface Props {
    index: number // 索引
    image: string
    name: string
    score: number
    author: string
    label: string[]
    id: string
    abstract: string
}

export const RankingBook: FC<Props> = (props) => {
    const {image, name, author, index, abstract, id} = props

    function locationInfo() {
        navigation(`/bookInfo?bookId=${id}`)
    }

    return (
        <div className="ranking_book">
            <div className="ranking_book_index" style={{color: randomColor()}}>
                {
                    index <= 2 ? <Image src={fireIcon} preview={false}/> : index + 1
                }
            </div>
            <div className="ranking_book_image">
                <Image src={image}/>
            </div>
            <div className="ranking_book_context">
                <h3 onClick={locationInfo}>{name}</h3>
                <h4 style={{color: "#595959"}}>{author}</h4>
                <p>{abstract}</p>
            </div>
        </div>
    )
}
